import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import Box from '@mui/material/Box';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';



const CountryDetailPage = ({countries, loading, mode })=>{
  let { countryName } = useParams();
  let navigate = useNavigate();
  let country = countries.find((item) => {
    return item.alpha3Code === countryName;
  });
  return(
    <Box sx={{ p:1 ,minHeight:"100vh",  bgcolor: (mode === 'dark' ?  'hsl(207, 26%, 17%)' : 'hsl(0, 1%, 98%)'), flexDirection:"column" } }>

      {!loading ? (
        <>
          <Box sx={{m:5, p:3, display:"flex",  flexDirection:"row", justifyContent:"flex-start"}}>
            <Button sx={{p:1}} color="secondary"  startIcon={<ArrowBackIcon />}  variant="outlined" onClick={() => navigate("/")}>
            <Typography
              component="h6"
              variant="h6"
              align="center"
              color="text.primary"
              noWrap
            >
            Navi Back
            </Typography>
            </Button>
          </Box>

          <Box sx={{ width: "100%" }}>
          <Grid container rowSpacing={2} columnSpacing={{ xs: 0, sm: 1, md: 1 } }>
          <Grid item xs={12} sm={6} md={2}>
          </Grid>
            <Grid item xs={12} sm={4} md={4}>
                <Paper sx={{ height: 140, width: 100 }} >
                      <img
                        height={400}
                        width={480}
                        src={country.flag}
                        alt={country.name}
                      />
                    </Paper>
            </Grid>
            <Grid item xs={12} sm={4} md={4}>
            <div>
                  <p>
                    nativeName :{" "}
                    <span >
                      {country.nativeName}
                    </span>
                  </p>
                  <p>
                    Population :{" "}
                    <span >
                      {country.population.toLocaleString("en")}
                    </span>
                  </p>
                  <p>
                    Region :{" "}
                    <span >
                      {country.region}
                    </span>
                  </p>
                  <p>
                    Sub Region :{" "}
                    <span >
                      {country.subregion}
                    </span>
                  </p>
                  <p>
                    Capital :{" "}
                    <span >
                      {country.capital || "No Capital"}
                    </span>
                  </p>
                </div>
                <div>
                  <p>
                    Top Level Domain :{" "}
                    <span >
                      {country.topLevelDomain && country.topLevelDomain[0]}
                    </span>
                  </p>
                  <p>
                    Currencies :{" "}
                    <span >
                      {country.currencies && country.currencies
                        .map((currency) => currency.name)
                        .join(", ")}
                    </span>
                  </p>
                  <p>
                    Languages :{" "}
                    <span >
                      {country.languages && country.languages.map((lang) => lang.name).join(", ")}
                    </span>
                  </p>
                </div>
              <div >
                <p>
                  Border Countries:{" "}
                </p>
                {country["borders"] && country.borders.map((border) => {
                  let bCountry = countries.find((count) => {
                    return count.alpha3Code === border;
                  });
                  if (!bCountry) return <span key={-1}></span>;
                  return (
                    <p
                      onClick={() =>
                        navigate(`/${bCountry.alpha3Code}`)
                      }
                      key={bCountry.alpha3Code}
                    >
                      {bCountry.name}
                    </p>
                  );
                })}
              </div>
            </Grid>
          </Grid>
        </Box>
        </>
      ) : (
        <p>loading</p>
      )}
  </Box>)
}

export default CountryDetailPage;